<section ng-show="open" ng-keyup="keyUp($event)" tabindex="1" class="modal modal-animation ng-hide modal-open" id="event-details-modal" ng-controller="EventCtrl">

  <header>
    <a class="fa fa-times close-modal" ng-click="close()"></a>
    <h2 translate="EVENTS.EVENTS.DETAILS.HEADER" translate-values="{{titleParams}}">
      <!-- Event details - {{resourceId}} -->
    </h2>
  </header>

  <nav class="modal-nav" id="modal-nav">

    <a ng-click="openTab('metadata')" data-modal-tab="metadata" ng-class="{ active: tab == 'metadata' }" translate="EVENTS.EVENTS.DETAILS.TABS.METADATA" with-role="ROLE_UI_EVENTS_DETAILS_METADATA_VIEW">
      <!-- Metadata -->
    </a>
    <a ng-if="extendedMetadataCatalogs.length > 0" ng-click="openTab('extended-metadata')" data-modal-tab="extended-metadata" ng-class="{ active: tab == 'extended-metadata' }" translate="EVENTS.EVENTS.DETAILS.TABS.EXTENDED-METADATA" with-role="ROLE_UI_EVENTS_DETAILS_METADATA_VIEW">
      <!-- Ext-Metadata -->
    </a>

    <a ng-click="openTab('publications')" data-modal-tab="publications" ng-class="{ active: tab == 'publications' }" translate="EVENTS.EVENTS.DETAILS.TABS.PUBLICATIONS" with-role="ROLE_UI_EVENTS_DETAILS_PUBLICATIONS_VIEW">
      <!-- Publications -->
    </a>

    <!--         <a ng-click="openTab('media')" data-modal-tab="media" ng-class="{ active: tab == 'media' }" translate="EVENTS.EVENTS.DETAILS.TABS.MEDIA" with-role="ROLE_UI_EVENTS_DETAILS_MEDIA_VIEW">Media</a> -->
    <a ng-click="openTab('assets')" data-modal-tab="assets" ng-class="{ active: tab == 'assets' }" translate="EVENTS.EVENTS.DETAILS.TABS.ASSETS" with-role="ROLE_UI_EVENTS_DETAILS_ASSETS_VIEW">
      <!-- Assets -->
    </a>

    <a ng-click="openTab('scheduling')" data-modal-tab="scheduling" ng-class="{ active: tab == 'scheduling' }" translate="EVENTS.EVENTS.DETAILS.TABS.SCHEDULING" with-role="ROLE_UI_EVENTS_DETAILS_SCHEDULING_VIEW" ng-if="scheduling.hasProperties">
      <!-- Scheduling -->
    </a>
    <a ng-click="openTab('workflows')" data-modal-tab="workflows" ng-class="{ active: tab == 'workflows' }" translate="EVENTS.EVENTS.DETAILS.TABS.WORKFLOWS" with-role="ROLE_UI_EVENTS_DETAILS_WORKFLOWS_VIEW">
      <!-- Workflows -->
    </a>
    <a ng-click="openTab('access')" data-modal-tab="access" ng-class="{ active: tab == 'access' }" translate="EVENTS.EVENTS.DETAILS.TABS.ACCESS" with-role="ROLE_UI_EVENTS_DETAILS_ACL_VIEW">
      <!-- Access -->
    </a>
    <a ng-click="openTab('comments')" data-modal-tab="comments" ng-class="{ active: tab == 'comments' }" translate="EVENTS.EVENTS.DETAILS.TABS.COMMENTS" with-role="ROLE_UI_EVENTS_DETAILS_COMMENTS_VIEW">
      <!-- Comments -->
    </a>
    <a ng-click="openTab('statistics')" data-modal-tab="statistics" ng-class="{ active: tab == 'statistics' }" translate="EVENTS.EVENTS.DETAILS.TABS.STATISTICS" with-role="ROLE_UI_EVENTS_DETAILS_STATISTICS_VIEW" ng-if="statReusable.hasStatistics()">
      <!-- Statistics -->
    </a>
  </nav>

  <nav id="breadcrumb"></nav>

  <a ng-click="showAdjacent(true)" ng-if="hasAdjacent(true)"><i class="arrow fa fa-chevron-left"></i></a>
  <a ng-click="showAdjacent()" ng-if="hasAdjacent()"><i class="arrow fa fa-chevron-right"></i></a>

  <div class="modal-content" data-modal-tab-content="publications">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj list-obj">
          <header translate="EVENTS.EVENTS.DETAILS.PUBLICATIONS.CAPTION">
            <!-- Publication Status -->
          </header>
          <div class="obj-container" ng-if="publications">
            <p translate="EVENTS.EVENTS.DETAILS.PUBLICATIONS.PUBLICATION_DESCRIPTION" ng-show="publications.publications.length">
            <!-- This event has been published to the following publication channels: -->
            </p>
            <ul>
              <li ng-repeat="publication in publications.publications | orderBy:'order' track by $index" ng-if="!publication.hide">
                <div class="v-container">
                  <span class="icon-container">
                    <i ng-if="publication.icon" custom-icon="{{ publication.icon }}" class="custom-icon"></i>
                    <i ng-if="!publication.icon" class="video-icon"><!-- holds the FontAwesome icon --></i>
                  </span>
                  <div>
                    <span translate="{{ publication.label }}">{{ publication.label }}</span>
                    <p class="description" translate="{{ publication.description }}" ng-if="publication.description">{{ publication.description }}</p>
                  </div>
                  <a data-ng-show="publication.enabled" href="{{ publication.url }}" class="play"></a>
                  <span data-ng-hide="publication.enabled" translate="EVENTS.EVENTS.DETAILS.PUBLICATIONS.LIVE_EVENT_NOT_IN_PROGRESS" style="display: inline-block;float: right;margin-left: auto;" >
                  </span>
                </div>
              </li>
            </ul>
            <p ng-hide="publications.publications.length" translate="EVENTS.EVENTS.DETAILS.PUBLICATIONS.NO_PUBLICATIONS_AVAILABLE">
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="metadata">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-metadata-common"></div>
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div data-admin-ng-notification="" data-type="warning" show="metadata.locked" message="{{ metadata.locked }}"></div>
      <div class="full-col">
        <div class="obj tbl-details">
          <header><span translate="EVENTS.EVENTS.DETAILS.METADATA.CAPTION"><!-- Event details --></span></header>
          <div class="obj-container">
            <table class="main-tbl">
              <tr ng-repeat="(idx, row) in commonMetadataCatalog.fields">
                <td>
                  <span translate="{{ row.label }}"></span>
                  <i ng-show="row.required" class="required">*</i>
                </td>
                <td admin-ng-editable
                    required-role="ROLE_UI_EVENTS_DETAILS_METADATA_EDIT"
                    params="row" save="getMetadataChangedFunction(commonMetadataCatalog.flavor)"
                    sanitize-xml="row.value" ng-model="row.value">
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <a
        class="submit"
        ng-class="{disabled: metadata.locked || !unsavedChanges([commonMetadataCatalog])}"
        ng-click="metadataSave([commonMetadataCatalog])">
        {{ "SAVE" | translate}}
      </a>
    </footer>
  </div>

  <div class="modal-content" data-modal-tab-content="extended-metadata" ng-if="extendedMetadataCatalogs.length > 0">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-metadata-extended"></div>
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div data-admin-ng-notification="" type="warning" show="metadata.locked" message="{{ metadata.locked }}"></div>
      <div class="full-col">
        <div class="obj tbl-details" ng-repeat="extendedMetadataCatalog in extendedMetadataCatalogs">
          <header><span>{{ extendedMetadataCatalog.title | translate }}</span></header>
          <div class="obj-container">
            <table class="main-tbl">
              <tr ng-repeat="row in extendedMetadataCatalog.fields track by $index">
                <td>
                  <span translate="{{ row.label }}"></span>
                  <i ng-show="row.required" class="required">*</i>
                </td>
                <td admin-ng-editable
                    required-role="ROLE_UI_EVENTS_DETAILS_METADATA_EDIT"
                    params="row" save="getMetadataChangedFunction(extendedMetadataCatalog.flavor)"
                    sanitize-xml="row.value" ng-model="row.value">
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <a
        class="submit"
        ng-class="{disabled: metadata.locked || !unsavedChanges(extendedMetadataCatalogs)}"
        ng-click="metadataSave(extendedMetadataCatalogs)">
        {{ "SAVE" | translate}}
      </a>
    </footer>
  </div>

  <div class="modal-content" data-modal-tab-content="assets">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container operations-tbl">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.CAPTION"><!-- Assets --></header>
          <div class="obj-container">
            <table class="main-tbl">
              <thead>
                <tr>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.TYPE"><!-- Type --></th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.SIZE"><!-- Size --></th>
                  <th class="medium">
                    <a translate="EVENTS.EVENTS.NEW.UPLOAD_ASSET.ADD"
                       class="details-link"
                       ng-show="((uploadAssetOptions | filter: {showAs: 'uploadAsset'}).length > 0 && !transactions.read_only)"
                       ng-click="openSubTab('newAssetUpload', 'EventAssetAttachmentsResource', 'newassetupload', false, true)"
                       with-role="ROLE_UI_EVENTS_DETAILS_ASSETS_EDIT">
                    </a>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.CAPTION">
                    <!-- Attachments -->
                  </td>
                  <td>{{ assets.attachments }}</td>
                  <td>
                    <a translate="EVENTS.EVENTS.DETAILS.ASSETS.DETAILS"
                       class="details-link"
                       ng-show="assets.attachments > 0"
                       ng-click="openSubTab('asset-attachments', 'EventAssetAttachmentsResource', 'attachment')">
                      <!-- Details -->
                    </a>
                  </td>
                </tr>
                <tr>
                  <td translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.CAPTION">
                    <!-- Catalogs -->
                  </td>
                  <td>{{ assets.catalogs }}</td>
                  <td>
                    <a translate="EVENTS.EVENTS.DETAILS.ASSETS.DETAILS"
                       class="details-link"
                       ng-show="assets.catalogs > 0"
                       ng-click="openSubTab('asset-catalogs', 'EventAssetCatalogsResource', 'catalog')">
                      <!-- Details -->
                    </a>
                  </td>
                </tr>
                <tr>
                  <td translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.CAPTION"><!-- Media --></td>
                  <td>{{ assets.media }}</td>
                  <td>
                    <a translate="EVENTS.EVENTS.DETAILS.ASSETS.DETAILS"
                       class="details-link"
                       ng-show="assets.media > 0"
                       ng-click="openSubTab('asset-media', 'EventAssetMediaResource', 'media')">
                      <!-- Details -->
                    </a>
                  </td>
                </tr>
                <tr>
                  <td translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.CAPTION">
                    <!-- Publications -->
                  </td>
                  <td>{{ assets.publications }}</td>
                  <td>
                    <a translate="EVENTS.EVENTS.DETAILS.ASSETS.DETAILS"
                       class="details-link"
                       ng-show="assets.publications > 0"
                       ng-click="openSubTab('asset-publications', 'EventAssetPublicationsResource', 'publication')">
                      <!-- Details -->
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="scheduling">
    <div class="modal-body">
      <div class="full-col">
        <div data-admin-ng-notifications="" context="event-scheduling"></div>
        <div data-admin-ng-notifications="" context="events-access"></div>
        <table ng-show="conflicts.length > 0" class="main-tbl scheduling-conflict">
          <tr ng-repeat="conflict in conflicts">
            <td>{{ conflict.title }}</td>
            <td>{{ conflict.start }}</td>
            <td>{{ conflict.end }}</td>
          </tr>
        </table>
        <!-- Scheduling configuration -->
        <div class="obj tbl-details" ng-if="scheduling.hasProperties">
          <header>
            <span translate="EVENTS.EVENTS.DETAILS.SCHEDULING.CAPTION">
              <!-- Scheduling configuration -->
            </span>
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <tr>
                <td>{{ 'EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.TIMEZONE' | translate }}</td>
                <td>{{ tz }}</td>
              </tr>
              <tr>
                <td>{{ 'EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_DATE' | translate }}</td>
                <td>
                  <input datepicker
                         type="text"
                         ng-disabled="checkingConflicts || !$root.userIs('ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT') || !hasCurrentAgentAccess()"
                         placeholder="{{ 'EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.START_DATE' | translate }}"
                         ng-model="source.start.date"
                         ng-change="onTemporalValueChange('start')" />
                </td>
              </tr>
              <tr>
                <td>{{ 'EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME' | translate }}</td>
                <td ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT')">
                  <select chosen
                          ng-disabled="checkingConflicts  || !hasCurrentAgentAccess()"
                          data-width="'100px'"
                          ng-model="source.start.hour"
                          ng-change="onTemporalValueChange('start')"
                          placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR' | translate}}'"
                          ng-options="h.index as h.value for h in hours"
                          ></select>
                    <select chosen
                            ng-disabled="checkingConflicts || !hasCurrentAgentAccess()"
                            data-width="'100px'"
                            ng-model="source.start.minute"
                            ng-change="onTemporalValueChange('start')"
                            placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE' | translate}}'"
                            ng-options="m.index as m.value for m in minutes"
                            ></select>
                </td>
                <td ng-if="!$root.userIs('ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT')">
                  {{ source.start.hour | addLeadingZeros : 2 }} : {{ source.start.minute | addLeadingZeros : 2}}
                </td>
              </tr>
              <tr>
                <td>{{ 'EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.DURATION' | translate }}</td>
                <td ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT')">
                  <select chosen
                          ng-disabled="checkingConflicts || !hasCurrentAgentAccess()"
                          data-width="'100px'"
                          ng-model="source.duration.hour"
                          ng-change="onTemporalValueChange('duration')"
                          placeholder-text-single="'{{ 'WIZARD.DURATION.HOURS' | translate }}'"
                          ng-options="h.index as h.value for h in hours"
                          ></select>

                    <select chosen
                            ng-disabled="checkingConflicts || !hasCurrentAgentAccess()"
                            data-width="'100px'"
                            ng-model="source.duration.minute"
                            ng-change="onTemporalValueChange('duration')"
                            placeholder-text-single="'{{ 'WIZARD.DURATION.MINUTES' | translate }}'"
                            ng-options="m.index as m.value for m in minutes"
                            ></select>
                </td>
                <td ng-if="!$root.userIs('ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT')">
                  {{ source.duration.hour | addLeadingZeros : 2 }} : {{ source.duration.minute | addLeadingZeros : 2}}
                </td>
              </tr>
              <tr>
                <td>{{ 'EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.END_TIME' | translate }}</td>
                <td ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT')">
                  <select chosen
                          ng-disabled="checkingConflicts || !hasCurrentAgentAccess()"
                          data-width="'100px'"
                          ng-model="source.end.hour"
                          ng-change="onTemporalValueChange('end')"
                          placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR' | translate}}'"
                          ng-options="h.index as h.value for h in hours"
                          ></select>
                    <select chosen
                            ng-disabled="checkingConflicts || !hasCurrentAgentAccess()"
                            data-width="'100px'"
                            ng-model="source.end.minute"
                            ng-change="onTemporalValueChange('end')"
                            placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE' | translate}}'"
                            ng-options="m.index as m.value for m in minutes"
                            ></select>
                      <span ng-bind="source.end.date"
                            ng-show="source.end.date !== source.start.date"
                            ></span>
                </td>
                <td ng-if="!$root.userIs('ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT')">
                  {{ source.end.hour | addLeadingZeros : 2 }} : {{ source.end.minute | addLeadingZeros : 2}}
                  <span ng-bind="source.end.date"
                        ng-show="source.end.date !== source.start.date"
                        ></span>
                </td>
              </tr>
              <tr>
                <td>{{ 'EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION' | translate }}</td>
                <td ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT')">
                  <select chosen
                          pre-select-from="captureAgents"
                          ng-disabled="checkingConflicts || !hasCurrentAgentAccess()"
                          data-width="'200px'"
                          ng-change="roomChanged(); saveScheduling(source.device, {{source.device || 'null'}})"
                          ng-model="source.device"
                          ng-options="ca.name for ca in captureAgents | filter:currentAgentOrAccess track by ca.id"
                          placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION' | translate }}'"
                          ></select>
                </td>
                <td ng-if="!$root.userIs('ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT')">
                  {{ source.device.name }}
                </td>
              </tr>
              <tr>
                <td>{{ 'EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.INPUTS' | translate }}</td>
                <td>
                  <label ng-repeat="inputMethod in source.device.inputs">
                    <input type="checkbox"
                           ng-change="saveScheduling()"
                           ng-model="source.device.inputMethods[inputMethod.id]"
                           ng-disabled="checkingConflicts || !$root.userIs('ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT') || !hasCurrentAgentAccess()"> {{ inputMethod.value | translate }}
                           <br>
                  </label>
                </td>
              </tr>
            </table>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="workflows">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <ul>
          <li>
            <div class="obj tbl-container" ng-if="!workflows.scheduling">
              <header translate="EVENTS.EVENTS.DETAILS.WORKFLOW_INSTANCES.TITLE"><!-- Workflow instances --></header>
              <div class="obj-container">
                <table class="main-tbl">
                  <thead>
                    <tr>
                      <th translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.ID"><!-- ID --></th>
                      <th translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.TITLE"><!-- Title --></th>
                      <th translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.SUBMITTER">
                        <!-- Submitter -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.SUBMITTED">
                        <!-- Submitted -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.STATUS"><!-- Status --></th>
                      <th translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.ACTIONS" ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT')" class="fit"><!-- Actions --></th>
                      <th class="medium"></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="item in workflows.entries|orderBy:'submitted':true track by $index">
                      <td>{{ item.id }}</td>
                      <td>{{ item.title }}</td>
                      <td>{{ item.submitterName + '&lt;' + item.submitterEmail + '&gt;' + ' (' + item.submitter + ')'}}</td>
                      <td>{{ item.submitted | localizeDate : 'dateTime' : 'medium' }}</td>
                      <td>{{ item.status | translate }}</td>
                      <td ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT')">
                        <a ng-show="item.status == 'EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.RUNNING'" ng-click="workflowAction(item.id, 'STOP')"
                           class="stop fa-fw"
                           title="{{ 'EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.STOP' | translate }}">
                          <!-- STOP -->
                        </a>
                        <a ng-show="item.status == 'EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.PAUSED'" ng-click="workflowAction(item.id, 'NONE')"
                           class="fa fa-hand-stop-o fa-fw" style="color:red"
                           title="{{ 'EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.ABORT' | translate }}">
                          <!-- Abort -->
                        </a>
                        <a ng-show="item.status == 'EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.PAUSED'" ng-click="workflowAction(item.id, 'RETRY')"
                           class="fa fa-refresh fa-fw"
                           title="{{ 'EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.RETRY' | translate }}">
                          <!-- Retry -->
                        </a>
                        <a ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_WORKFLOWS_DELETE')"
                           ng-show="(item.status == 'EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.SUCCEEDED'
                             || item.status == 'EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.FAILED'
                             || item.status == 'EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.STOPPED')
                             && !isCurrentWorkflow(item.id)"
                           ng-click="deleteWorkflow(item.id)"
                           class="remove fa-fw"
                           title="{{ 'EVENTS.EVENTS.DETAILS.WORKFLOWS.TOOLTIP.DELETE' | translate }}">
                          <!-- DELETE -->
                        </a>

                      </td>
                      <td>
                        <a class="details-link" ng-click="openSubTab('workflow-details', 'EventWorkflowDetailsResource', item.id)"
                           translate="EVENTS.EVENTS.DETAILS.MEDIA.DETAILS">
                          <!-- Details -->
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="obj list-obj" ng-if="workflows.scheduling">
              <header translate="EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.CONFIGURATION"><!-- Workflow configuration --></header>
              <div class="obj-container">
                <div class="obj list-obj quick-actions">

                  <table class="main-tbl">
                    <thead>
                      <tr>
                        <th translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.WORKFLOW">
                          <!--Select Workflow-->
                        </th>
                      </tr>
                    </thead>

                    <tbody>
                      <tr>
                        <td>
                          <div class="obj-container padded">
                            <select chosen
                                    pre-select-from="workflowDefinitionIds"
                                    data-width="'100%'"
                                    ng-model="workflow.id"
                                    ng-change="changeWorkflow(false)"
                                    ng-disabled="!$root.userIs('ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT') || !hasCurrentAgentAccess()"
                                    ng-options="w.id as w.title for w in workflowDefinitions | orderBy: 'displayOrder':true"
                                    placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW' | translate }}'"
                                    no-results-text="'{{ 'EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW_EMPTY' | translate }}'"
                                    ></select>
                              <div class="obj-container padded">{{ workflows.workflow.description }}</div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <div class="obj list-obj quick-actions">

                  <table class="main-tbl">
                    <thead>
                      <tr>
                        <th translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.CONFIGURATION">
                          <!-- Select Configuration -->
                        </th>
                      </tr>
                    </thead>

                    <tbody>
                      <tr>
                        <td>
                          <div class="obj-container padded">
                            <div id="event-workflow-configuration"
                                 ng-disabled="!$root.userIs('ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT') || !hasCurrentAgentAccess()"
                                 ng-bind-html="workflowConfiguration"
                                 class="obj-container">
                            </div>
                            <div ng-if="!workflowConfiguration" translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.NO_CONFIGURATION">
                              <!-- No config -->
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>


                </div>
              </div>
            </div>

          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="access">
    <div class="modal-body">
      <div data-admin-ng-notification="" type="warning" show="access.episode_access.locked" message="{{ metadata.locked }}"></div>
      <div data-admin-ng-notifications="" type="error" context="event-acl"></div>
      <div data-admin-ng-notifications="" context="events-access"></div>

      <div class="full-col">
        <ul>
          <li>
            <div class="obj list-obj">
              <header translate="EVENTS.EVENTS.DETAILS.TABS.ACCESS"><!-- Access Policy --></header>
              <div class="obj-container">
                <div class="obj tbl-list">
                  <table class="main-tbl" ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')">
                    <thead>
                      <tr>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.TEMPLATES.TITLE">
                          <!-- Templates -->
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <div class="obj-container padded">
                            <p translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.DESCRIPTION">
                            <!-- Description -->
                            </p>
                            <div ng-show="!transactions.read_only">
                              <select chosen
                                      pre-select-from="acls"
                                      data-width="'200px'"
                                      ng-disabled="((tab == 'access') && !$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT'))"
                                      ng-change="changeBaseAcl(baseAclId)"
                                      ng-model="baseAclId"
                                      ng-options="id as name for (id, name) in acls"
                                      placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.LABEL' | translate }}'"
                                      no-results-text="'{{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.EMPTY' | translate }}'"
                                      ></select>
                            </div>
                            <p ng-show="transactions.read_only">{{baseAclId}}</p>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="obj-container" ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_USER_ROLES_VIEW')">
                <div class="obj tbl-list">
                  <header translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.USERS">
                    <!-- Details -->
                  </header>
                  <div class="obj-container">
                    <table class="main-tbl">
                      <thead>
                      <tr>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.USER">
                          <!-- User -->
                        </th>
                        <th class="fit">
                          <!-- Read -->
                          {{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.READ' | translate }}
                          <span title="{{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.HELP.READ' | translate}}"
                                class="fa fa-question-circle">
                          </span>
                        </th>
                        <th class="fit">
                          <!-- Write -->
                          {{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.WRITE' | translate }}
                          <span title="{{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.HELP.WRITE' | translate}}"
                                class="fa fa-question-circle">
                          </span>
                        </th>
                        <th translate="EVENTS.SERIES.DETAILS.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" class="fit" ng-if="hasActions">
                          <!-- Additional Actions -->
                        </th>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.ACTION" ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')" class="fit">
                          <!-- Action -->
                        </th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr ng-repeat="policy in policiesUser | filter: userExists">
                        <td ng-show="!transactions.read_only">
                          <select chosen
                                  pre-select-from="users"
                                  ng-disabled="((tab == 'access') && !$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT'))"
                                  data-width="'360px'"
                                  ng-model="policy.role"
                                  ng-options="user.userRole as userToStringForDetails(user) for user in users"
                                  call-on-search="getMatchingRoles"
                                  placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.ACCESS.USERS.LABEL' | translate }}'"
                                  no-results-text="'{{ 'EVENTS.EVENTS.DETAILS.ACCESS.USERS.EMPTY' | translate }}'"
                          ></select>
                        </td>
                        <td ng-show="transactions.read_only">
                          <p>{{userToStringForDetails(policy.user)}}</p>
                        </td>
                        <td class="fit text-center">
                          <input type="checkbox"
                                 ng-model="policy.read"
                                 ng-disabled="(transactions.read_only) || !$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT') || aclCreateDefaults['read_readonly']"/>
                        </td>
                        <td class="fit text-center">
                          <input type="checkbox"
                                 ng-model="policy.write"
                                 ng-disabled="(transactions.read_only) || !$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT') || aclCreateDefaults['write_readonly']"/>
                        </td>
                        <td class="fit editable" ng-if="hasActions">
                          <div ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT') && !transactions.read_only"
                               admin-ng-editable-multi-select
                               mixed="false"
                               params="policy.actions"
                               collection="actions">
                          </div>
                          <div ng-if="((!$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')) || transactions.read_only)"
                               ng-repeat="customAction in policy.actions.value">
                            {{ customAction }}
                          </div>
                        </td>
                        <td ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')"
                            class="fit">
                          <a ng-show="!transactions.read_only"
                             ng-click="deletePolicy(policiesUser, policy)"
                             class="remove"></a>
                        </td>
                      </tr>
                      <!-- Another loop specifically to show user roles for which no user exists -->
                      <tr ng-repeat="policy in policiesUser | filter: not(userExists)">
                        <td>
                          <p>{{'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.NONEXISTENT_USER' | translate}}: {{policy.userDoesNotExist}}</p>
                        </td>
                        <td class="fit text-center">
                          <input type="checkbox"
                                 ng-model="policy.read"
                                 ng-disabled="true"/>
                        </td>
                        <td class="fit text-center">
                          <input type="checkbox"
                                 ng-model="policy.write"
                                 ng-disabled="true"/>
                        </td>
                        <td class="fit editable" ng-if="hasActions">
                          <div ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT') && !transactions.read_only"
                               admin-ng-editable-multi-select
                               mixed="false"
                               params="policy.actions"
                               collection="actions">
                          </div>
                          <div ng-if="((!$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')) || transactions.read_only)"
                               ng-repeat="customAction in policy.actions.value">
                            {{ customAction }}
                          </div>
                        </td>
                        <td ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')"
                            class="fit">
                          <a ng-show="!transactions.read_only"
                             ng-click="deletePolicy(policiesUser, policy)"
                             class="remove"></a>
                        </td>
                      </tr>
                      <tr ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')" >
                        <td colspan="5"><a ng-show="!transactions.read_only" ng-click="addPolicy(policiesUser)">+ {{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.NEW_USER' | translate }}</a></td>
                      <tr>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <!-- Work in progress: Here, we will fill in the currently set privileges. The backend will
              change the format of the response. -->
              <div class="obj-container" ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_NONUSER_ROLES_VIEW')">
                <div class="obj tbl-list">
                  <header translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.DETAILS">
                    <!-- Details -->
                  </header>
                  <div class="obj-container">
                    <table class="main-tbl">
                      <thead>
                        <tr>
                          <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.ROLE">
                            <!-- Role -->
                          </th>
                          <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.READ" class="fit">
                            <!-- Read -->
                          </th>
                          <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.WRITE" class="fit">
                            <!-- Write -->
                          </th>
                          <th translate="EVENTS.SERIES.DETAILS.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" class="fit" ng-if="hasActions">
                            <!-- Additional Actions -->
                          </th>
                          <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.ACTION" ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')" class="fit">
                            <!-- Action -->
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr ng-repeat="policy in policies">
                          <td ng-show="!transactions.read_only">
                            <select chosen
                                    pre-select-from="roles"
                                    ng-disabled="((tab == 'access') && !$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT'))"
                                    data-width="'360px'"
                                    ng-model="policy.role"
                                    ng-options="role as role for role in roles | filter: filterUserRoles"
                                    call-on-search="getMatchingRoles"
                                    placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.ACCESS.ROLES.LABEL' | translate }}'"
                                    no-results-text="'{{ 'EVENTS.EVENTS.DETAILS.ACCESS.ROLES.EMPTY' | translate }}'"
                                    ></select>
                          </td>
                          <td ng-show="transactions.read_only">
                            <p>{{policy.role}}</p>
                          </td>
                          <td class="fit text-center">
                            <input type="checkbox"
                                   ng-model="policy.read"
                                   ng-disabled="(transactions.read_only) || !$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT') || aclCreateDefaults['read_readonly']"/>
                          </td>
                          <td class="fit text-center">
                            <input type="checkbox"
                                   ng-model="policy.write"
                                   ng-disabled="(transactions.read_only) || !$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT') || aclCreateDefaults['write_readonly']"/>
                          </td>
                          <td class="fit editable" ng-if="hasActions">
                            <div ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT') && !transactions.read_only"
                                 admin-ng-editable-multi-select mixed="false"
                                 params="policy.actions"
                                 collection="actions">
                            </div>
                            <div ng-if="((!$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')) || transactions.read_only)"
                                 ng-repeat="customAction in policy.actions.value">
                              {{ customAction }}
                            </div>
                          </td>
                          <td ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')"
                              class="fit">
                            <a ng-show="!transactions.read_only"
                               ng-click="deletePolicy(policies, policy)"
                               class="remove">
                            </a>
                          </td>
                        </tr>
                        <tr ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_EDIT')" >
                          <td colspan="5">
                            <a ng-show="!transactions.read_only"
                               ng-click="addPolicy(policies)">
                              + {{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.NEW' | translate }}
                            </a>
                          </td>
                          <tr>
                          </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <footer>
                <a ng-click="accessSave(policy)"
                   class="submit">
                  {{ "SAVE" | translate}}
                </a>
              </footer>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="comments">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">

        <!--
          <div class="alert sticky error">
          <a class="fa fa-times"></a>
        -->
        <!-- info icon
          <i class="fa fa-info-circle"></i>
        -->
        <!-- warning icon
          <i class="fa fa-exclamation-triangle"></i>
        -->
        <!-- success icon
          <i class="fa fa-check-circle-o"></i>
        -->
        <!-- error icon
          <i class="fa fa-minus-circle"></i>
          <p>The item update was rejected because 3 fields are missing or incomplete</p>
          </div>-->
          <div class="obj comments">
            <header class="no-expand" translate="EVENTS.EVENTS.DETAILS.COMMENTS.CAPTION">
              <!-- Comments -->
            </header>
            <div class="obj-container">
              <div class="comment-container">
                <div class="comment" ng-class="{ active : $parent.replyToId === comment.id }"
                                     ng-repeat="comment in comments track by $index">
                  <hr>
                  <div class="date">{{ comment.creationDate | localizeDate : 'dateTime' : 'short' }}</div>
                  <h4>{{ comment.author.name }}</h4>
                  <span class="category">
                    <strong translate="EVENTS.EVENTS.DETAILS.COMMENTS.REASON">Reason: </strong>: {{ comment.reason | translate }}
                  </span>
                  <p>{{ comment.text }}</p>
                  <a ng-click="deleteComment(comment.id)" class="delete">
                    {{ 'EVENTS.EVENTS.DETAILS.COMMENTS.DELETE' | translate }}
                  </a>
                  <a ng-click="replyTo(comment)" class="reply" with-role="ROLE_UI_EVENTS_DETAILS_COMMENTS_REPLY">
                    {{ 'EVENTS.EVENTS.DETAILS.COMMENTS.REPLY' | translate }}
                  </a>
                  <span class="resolve" ng-class="{ resolved : comment.resolvedStatus }">
                    {{ 'EVENTS.EVENTS.DETAILS.COMMENTS.RESOLVED' | translate }}
                  </span>

                  <div class="comment is-reply" ng-repeat="reply in comment.replies track by $index">
                    <hr>
                    <div class="date">{{ reply.creationDate | localizeDate : 'dateTime' : 'short' }}</div>
                    <h4>{{ reply.author.name }}</h4>
                    <span class="category">
                      <strong translate="EVENTS.EVENTS.DETAILS.COMMENTS.REASON">Reason: </strong>: {{ comment.reason | translate }}
                    </span>
                    <p>
                    <span>@{{ comment.author.name }}</span> {{ reply.text }}
                    </p>
                    <a ng-click="deleteCommentReply(comment.id, reply.id)" class="delete" with-role="ROLE_UI_EVENTS_DETAILS_COMMENTS_DELETE">
                      <i class="fa fa-times-circle"></i> {{ 'EVENTS.EVENTS.DETAILS.COMMENTS.DELETE' | translate }}
                    </a>
                  </div>
                </div>
              </div>
              <form class="add-comment" ng-if="replyToId === null" with-role="ROLE_UI_EVENTS_DETAILS_COMMENTS_CREATE">
                <textarea ng-model="myComment.text" placeholder="{{ 'EVENTS.EVENTS.DETAILS.COMMENTS.PLACEHOLDER' | translate }}"></textarea>
                <div>
                  <select chosen
                          pre-select-from="components.eventCommentReasons"
                          data-width="'200px'"
                          ng-model="myComment.reason"
                          ng-options="value | translate for (id, value) in components.eventCommentReasons"
                          placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.COMMENTS.SELECTPLACEHOLDER' | translate }}'"
                          >
                          <option value=""></option>
                  </select>
                </div>
                <button ng-class="{ disabled: !myComment.text.length || !myComment.reason.length || myComment.saving }" class="save green" ng-click="comment()" translate="SUBMIT">
                  <!-- Submit -->
                </button>
              </form>

              <form class="add-comment reply" ng-if="replyToId !== null">
                <textarea ng-model="myComment.text"
                          placeholder="{{ 'EVENTS.EVENTS.DETAILS.COMMENTS.REPLY_TO' | translate }} @{{ originalComment.author.name }}"></textarea>
                <button ng-class="{ disabled: !myComment.text.length || myComment.saving }" class="save green" ng-click="reply()"
                                                                                                               translate="EVENTS.EVENTS.DETAILS.COMMENTS.REPLY">
                  <!-- Reply -->
                </button>
                <button class="red" ng-click="exitReplyMode()" translate="EVENTS.EVENTS.DETAILS.COMMENTS.CANCEL_REPLY">
                  <!-- Cancel -->
                </button>
                <input with-role="ROLE_UI_EVENTS_DETAILS_COMMENTS_RESOLVE" type="checkbox" ng-model="myComment.resolved" id="resolved-checkbox" class="ios"/>
                <label with-role="ROLE_UI_EVENTS_DETAILS_COMMENTS_RESOLVE" for="resolved-checkbox" translate="EVENTS.EVENTS.DETAILS.COMMENTS.RESOLVED">
                  <!-- Resolved -->
                </label>
              </form>
            </div>
          </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="statistics">
    <div class="modal-body">
      <div class="full-col">
        <div class="modal-alert danger" ng-if="statReusable.error" translate="STATISTICS.NOT_AVAILABLE"></div>

        <div class="obj" ng-repeat="data in statReusable.statProviderData" ng-if="!statReusable.error">
          <header class="no-expand" translate="{{ data.title }}">
            <!-- Statistics -->
          </header>
          <div class="obj-container" ng-if="data.providerType == 'timeSeries'">
            <statistics-graph
              chart-labels="data.labels"
              chart-options="data.options"
              data-resolution="data.dataResolution"
              provider="data.providerId"
              from="data.from"
              on-change="statReusable.recalculate(data.providerId, from, to, dataResolution, timeChooseMode)"
              export-url="data.csvUrl"
              export-file-name="statisticsCsvFileName(data.title | translate)"
              source-data="data.values"
              time-choose-mode="data.timeChooseMode"
              to="data.to"
              total-value="data.totalValue"
              description="data.description"
              >
            </statistics-graph>
          </div>
          <div class="modal-alert danger"
               ng-if="data.providerType != 'timeSeries'"
               translate="STATISTICS.UNSUPPORTED_TYPE">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="quick-actions-details" data-level="2" data-label="EVENTS.EVENTS.DETAILS.QUICKACTION_WORKFLOW_DETAILS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj workflow-options">
          <header translate="EVENTS.EVENTS.DETAILS.QUICKACTION_WORKFLOW_DETAILS.TITLE">
            <!-- Workflow Details -->
          </header>
          <div class="obj-container padded">
            <p>This is filler text, please ignore me and don't bother reading. This section will be used to describe the workflow options section. This is filler text, please ignore me and don't bother reading. This section will be used to describe the workflow options section.</p>
            <div class="checkbox-container">
              <label><input type="checkbox">Media Package</label><br>
              <label><input type="checkbox">Delete Distribution Files</label><br>
              <label><input type="checkbox">Delete Master Files</label><br>
            </div>
            <div class="btn-container">
              <a href="javascript:;" class="cancel-btn">Cancel</a>
              <a href="javascript:;" ng-show="!transactions.read_only" class="add-btn">Add</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="errors-and-warnings" data-level="3" data-label="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container">
          <header translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.HEADER">
            <!-- Errors & Warnings -->
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <thead>
                <tr>
                  <th class="small"></th>
                  <th translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DATE">
                    <!-- Date / Time -->
                    <i></i>
                  </th>
                  <th translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.TITLE">
                    <!-- Title -->
                    <i></i>
                  </th>
                  <th class="medium"></th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in subNavData.entries track by $index">
                  <td><div ng-if="angular.isDefined(item.severity)" class="circle {{ severityColor(item.severity) }}"></div></td>
                  <td>{{ item.timestamp | localizeDate : 'dateTime' : 'medium'}}</td>
                  <td>{{ item.title }}</td>
                  <td>
                    <a class="details-link" ng-click="openSubTab('error-details', 'EventErrorDetailsResource', item.id)" translate="EVENTS.EVENTS.DETAILS.MEDIA.DETAILS" data-modal-tab="error-details">
                      <!-- Details -->
                    </a>
                  </td>
                </tr>
                <tr ng-if="subNavData.entries.length === 0">
                  <td colspan="4" translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.EMPTY">
                    <!-- No errors found. -->
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="error-details" data-level="4" data-label="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HEADER">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-details">
          <header translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HEADER">
            <!-- Error Details -->
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.SEVERITY">
                  <!-- Severity -->
                </td>
                <td>{{ subNavData.severity }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TITLE">
                  <!-- Title -->
                </td>
                <td>{{ subNavData.title }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.DESCRIPTION">
                  <!-- Description -->
                </td>
                <td>{{ subNavData.description }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.JOB_ID">
                  <!-- Job ID -->
                </td>
                <td>{{ subNavData.job_id }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.DATE">
                  <!-- Date / Time -->
                </td>
                <td>{{ subNavData.timestamp | localizeDate : 'dateTime' : 'medium' }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HOST">
                  <!-- Host -->
                </td>
                <td>{{ subNavData.processing_host }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TYPE">
                  <!-- Type -->
                </td>
                <td>{{ subNavData.service_type }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TECHNICAL_DETAILS">
                  <!-- Technical Details -->
                </td>
                <td>
                  <div ng-repeat="item in subNavData.details track by $index">
                    <h3>{{ item.name }}</h3>
                    <div style="overflow: auto; width: 750px;">
                      <pre >{{ item.value }}</pre>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-content" data-modal-tab-content="newAssetUpload" data-parent="assets" data-level="2" data-label="EVENTS.EVENTS.NEW.UPLOAD_ASSET.ADD">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container operations-tbl">
          <header translate="EVENTS.EVENTS.NEW.UPLOAD_ASSET.ADD"><!-- Attachments --></header>
          <div class="obj-container">
            <!-- Note: attributes passed to the upload Directive cannot be cammel cased or contain dashes -->
            <div admin-ng-upload-asset assetoptions="uploadAssetOptions" filebindcontainer="newAssets" >
              <!-- init "assetoptions" for content transcluded by the asset upload directive -->
            </div>
            <footer>
              <a ng-click="saveAssets()" ng-keyup="saveAssetsKeyUp($event)"
                 data-modal-tab="next" class="submit" tabindex="100"
                 ng-class="active">
                {{ "EVENTS.EVENTS.NEW.UPLOAD_ASSET.ADD" | translate}}
              </a>
            </footer>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="asset-attachments" data-parent="assets" data-level="2" data-label="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container operations-tbl">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.CAPTION"><!-- Attachments --></header>
          <div class="obj-container">
            <table class="main-tbl">
              <thead>
                <tr>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.ID"><!-- ID --></th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.TYPE"><!-- Type --></th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.MIMETYPE">
                    <!-- Mimetype -->
                  </th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.TAGS"><!-- Tags --></th>
                  <th class="medium"></th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in subNavData">
                  <td>{{ item.id }}</td>
                  <td>{{ item.type }}</td>
                  <td>{{ item.mimetype }}</td>
                  <td>{{ item.tags|joinBy:', ' }}</td>
                  <td>
                    <a ng-click="openSubTab('attachment-details', 'EventAttachmentDetailsResource', item.id)" translate="EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" class="details-link">
                      <!-- Details -->
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="asset-catalogs" data-parent="assets" data-level="2" data-label="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container operations-tbl">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.CAPTION"><!-- Catalogs --></header>
          <div class="obj-container">
            <table class="main-tbl">
              <thead>
                <tr>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.ID"><!-- ID --></th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.TYPE"><!-- Type --></th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.MIMETYPE">
                    <!-- Mimetype -->
                  </th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.TAGS"><!-- Tags --></th>
                  <th class="medium"></th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in subNavData">
                  <td>{{ item.id }}</td>
                  <td>{{ item.type }}</td>
                  <td>{{ item.mimetype }}</td>
                  <td>{{ item.tags|joinBy:', ' }}</td>
                  <td>
                    <a ng-click="openSubTab('catalog-details', 'EventCatalogDetailsResource', item.id)" translate="EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" class="details-link">
                      <!-- Details -->
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="asset-media" data-parent="assets" data-level="2" data-label="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container operations-tbl">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.CAPTION"><!-- Media --></header>
          <div class="obj-container">
            <table class="main-tbl">
              <thead>
                <tr>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.ID"><!-- ID --></th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.TYPE"><!-- Type --></th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.MIMETYPE"><!-- Mimetype --></th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.TAGS"><!-- Tags --></th>
                  <th class="medium"></th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in subNavData">
                  <td><a ng-href="{{item.url}}">{{item.id}}</a></td>
                  <td>{{ item.type }}</td>
                  <td>{{ item.mimetype }}</td>
                  <td>{{ item.tags|joinBy:', ' }}</td>
                  <td>
                    <a ng-click="openSubTab('media-details', 'EventMediaDetailsResource', item.id, false, true)" translate="EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" class="details-link">
                      <!-- Details -->
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="asset-publications" data-parent="assets" data-level="2" data-label="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container operations-tbl">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.CAPTION">
            <!-- Publications -->
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <thead>
                <tr>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.ID"><!-- ID --></th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.CHANNEL">
                    <!-- Channel -->
                  </th>
                  <th translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.TAGS"><!-- Tags --></th>
                  <th class="medium"></th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in subNavData">
                  <td>{{ item.id }}</td>
                  <td>{{ item.channel }}</td>
                  <td>{{ item.tags|joinBy:', ' }}</td>
                  <td>
                    <a ng-click="openSubTab('publications-details', 'EventPublicationDetailsResource', item.id)" translate="EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" class="details-link">
                      <!-- Details -->
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="attachment-details" data-parent="attachments" data-level="3" data-label="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container operations-tbl">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.CAPTION">
            <!-- Attachment -->
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.ID">
                  <!-- Id -->
                </td>
                <td>{{ subNavData.id }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.TYPE">
                  <!-- Type -->
                </td>
                <td>{{ subNavData.type }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.MIMETYPE">
                  <!-- Mimetype -->
                </td>
                <td>{{ subNavData.mimetype }}</td>
              </tr>
              <tr ng-if="subNavData.size > 0">
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.SIZE">
                  <!-- Size -->
                </td>
                <td>{{ subNavData.size | humanBytes }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.CHECKSUM">
                  <!-- Checksum -->
                </td>
                <td>{{ subNavData.checksum }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.REFERENCE">
                  <!-- Reference -->
                </td>
                <td>{{ subNavData.reference }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.TAGS">
                  <!-- Tags -->
                </td>
                <td>{{ subNavData.tags|joinBy:', ' }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.URL">
                  <!-- Link -->
                </td>
                <td><a href="{{ subNavData.url }}" class="fa fa-external-link"></a></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div>
        <img src ="{{ subNavData.url }}" style="max-width:100% ; padding-top: 3%;" alt ="Preview of the attachment" />
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="catalog-details" data-parent="catalogs" data-level="3" data-label="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container operations-tbl">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.CAPTION">
            <!-- Catalogs -->
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.ID">
                  <!-- Id -->
                </td>
                <td>{{ subNavData.id }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.TYPE">
                  <!-- Type -->
                </td>
                <td>{{ subNavData.type }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.MIMETYPE">
                  <!-- Mimetype -->
                </td>
                <td>{{ subNavData.mimetype }}</td>
              </tr>
              <tr ng-if="subNavData.size > 0">
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.SIZE">
                  <!-- Size -->
                </td>
                <td>{{ subNavData.size | humanBytes }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.CHECKSUM">
                  <!-- Checksum -->
                </td>
                <td>{{ subNavData.checksum }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.REFERENCE">
                  <!-- Reference -->
                </td>
                <td>{{ subNavData.reference }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.TAGS">
                  <!-- Tags -->
                </td>
                <td>{{ subNavData.tags|joinBy:', ' }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.URL">
                  <!-- Link -->
                </td>
                <td><a href="{{ subNavData.url }}" class="fa fa-external-link"></a></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="media-details" data-parent="media" data-level="3" data-label="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-details">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TITLE">
            <!-- Media Details -->
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.ID">
                  <!-- ID -->
                </td>
                <td>{{ subNavData.id }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TYPE">
                  <!-- Type -->
                </td>
                <td>{{ subNavData.type }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.MIMETYPE">
                  <!-- Mimetype -->
                </td>
                <td>{{ subNavData.mimetype }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TAGS">
                  <!-- Tags -->
                </td>
                <td>{{ subNavData.tags|joinBy:', ' }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.DURATION">
                  <!-- Duration -->
                </td>
                <td>{{ subNavData.duration | humanDuration }}</td>
              </tr>
              <tr ng-if="subNavData.size > 0">
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SIZE">
                  <!-- Size -->
                </td>
                <td>{{ subNavData.size | humanBytes }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.URL">
                  <!-- URL -->
                </td>
                <td><a href="{{ subNavData.url }}">{{ subNavData.url | removeQueryParams }}</a></td>
              </tr>
            </table>
          </div>
        </div>

        <div class="obj tbl-container media-stream-details">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.STREAMS"><!-- Streams --></header>
          <div class="obj-container">
            <div class="table-series">
              <div class="wrapper">
                <header translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.STREAM_AUDIO">
                  <!-- Audio streams -->
                </header>
                <table class="main-tbl">
                  <thead>
                    <tr>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.ID">
                        <!-- ID -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TYPE">
                        <!-- Type -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.CHANNELS">
                        <!-- Channels -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.BITRATE">
                        <!-- Bitrate -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.BITDEPTH">
                        <!-- Bitdepth -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SAMPLINGRATE">
                        <!-- Samplingrate -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.FRAMECOUNT">
                        <!-- Framecount -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.PEAKLEVELDB">
                        <!-- Peak level DB -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.RMSLEVELDB">
                        <!-- RMS level DB -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.RMSPEAKDB">
                        <!-- RMS speak DB -->
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="stream in subNavData.streams.audio track by $index">
                      <td>{{ $index }}</td>
                      <td>{{ stream.type }}</td>
                      <td>{{ stream.channels }}</td>
                      <td>{{ stream.bitrate }}</td>
                      <td>{{ stream.bitdepth }}</td>
                      <td>{{ stream.samplingrate }}</td>
                      <td>{{ stream.framecount }}</td>
                      <td>{{ stream.peakleveldb }}</td>
                      <td>{{ stream.rmsleveldb }}</td>
                      <td>{{ stream.rmspeakdb }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="wrapper">
                <header translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.STREAM_VIDEO">
                  <!-- Video streams -->
                </header>
                <table class="main-tbl">
                  <thead>
                    <tr>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.ID">
                        <!-- ID -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TYPE">
                        <!-- Type -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.FRAMERATE">
                        <!-- Framerate -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.BITRATE">
                        <!-- Bitrate -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.RESOLUTION">
                        <!-- Resolution -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.FRAMECOUNT">
                        <!-- Framecount -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SCANTYPE">
                        <!-- Scantype -->
                      </th>
                      <th translate="EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SCANORDER">
                        <!-- Scanorder -->
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="stream in subNavData.streams.video track by $index">
                      <td>{{ $index }}</td>
                      <td>{{ stream.type }}<i></i></td>
                      <td>{{ stream.framerate }}<i></i></td>
                      <td>{{ stream.bitrate }}<i></i></td>
                      <td>{{ stream.resolution }}<i></i></td>
                      <td>{{ stream.framecount }}<i></i></td>
                      <td>{{ stream.scantype }}<i></i></td>
                      <td>{{ stream.scanorder }}<i></i></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="obj tbl-container media-stream-details">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.PREVIEW"><!-- Preview --></header>
          <div class="obj-container">
            <div ng-if="subTab == 'media-details'"
                 data-video-player data-player="{}"
                 data-video="subNavData.video"
                 data-adapter="html5"
                 data-player-ref="player"
                 data-controls="true"
                 data-sub-controls="false">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="publications-details" data-parent="publications" data-level="3" data-label="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container operations-tbl">
          <header translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.CAPTION">
            <!-- Publications -->
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.ID">
                  <!-- Id -->
                </td>
                <td>{{ subNavData.id }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.TYPE">
                  <!-- Type -->
                </td>
                <td>{{ subNavData.type }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.MIMETYPE">
                  <!-- Mimetype -->
                </td>
                <td>{{ subNavData.mimetype }}</td>
              </tr>
              <tr ng-if="subNavData.size > 0">
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.SIZE">
                  <!-- Size -->
                </td>
                <td>{{ subNavData.size | humanBytes }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.CHANNEL">
                  <!-- Channel -->
                </td>
                <td>{{ subNavData.channel }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.REFERENCE">
                  <!-- Reference -->
                </td>
                <td>{{ subNavData.reference }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.TAGS">
                  <!-- Tags -->
                </td>
                <td>{{ subNavData.tags|joinBy:', ' }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.URL">
                  <!-- Link -->
                </td>
                <td><a href="{{ subNavData.url }}" class="fa fa-external-link"></a></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="modal-content" data-modal-tab-content="workflow-details" data-parent="workflows" data-level="2" data-label="EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-details">
          <header translate="EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.TITLE"><!-- Workflow Details --></header>
          <div class="obj-container">
            <table class="main-tbl vertical-headers">
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.TITLE"><!-- Title --></td>
                <td>{{ subNavData.title }}</td>
              </tr>
              <tr ng-if="subNavData.description">
                <td translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.DESCRIPTION"><!-- Description --></td>
                <td>{{ subNavData.description }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.SUBMITTER"><!-- Submitter--></td>
                <td>
                  {{ subNavData.creator }}
                </td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.SUBMITTED"><!-- Submitted --></td>
                <td>{{ subNavData.submittedAt | localizeDate : 'dateTime' : 'medium' }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.STATUS"><!-- Status --></td>
                <td>{{ subNavData.status | translate }}</td>
              </tr>
              <tr ng-if="subNavData.status !== 'EVENTS.EVENTS.DETAILS.WORKFLOWS.OPERATION_STATUS.RUNNING'">
                <td translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.EXECUTION_TIME"><!-- Execution time --></td>
                <td>{{ subNavData.executionTime | humanDuration }}</td>
              </tr>
              <tr with-role="ROLE_ADMIN">
                <td translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.ID"><!-- ID --></td>
                <td>{{ subNavData.wiid }}</td>
              </tr>
              <tr with-role="ROLE_ADMIN">
                <td translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.WDID"><!-- Workflow definition --></td>
                <td>{{ subNavData.wdid }}</td>
              </tr>
            </table>
          </div>
        </div>

        <div class="obj tbl-details" with-role="ROLE_ADMIN">
          <header translate="EVENTS.EVENTS.DETAILS.WORKFLOW_DETAILS.CONFIGURATION">
            <!-- Workflow configuration -->
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <tr ng-repeat="(key, value) in subNavData.configuration">
                <td>{{ key }}</td>
                <td>{{ value }}</td>
              </tr>
            </table>
          </div>
        </div>

        <div class="obj tbl-container more-info-actions">
          <header translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.MORE_INFO">
            <!-- More Information -->
          </header>
          <div class="obj-container">
            <ul>
              <li>
                <span translate="EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.DETAILS_LINK">
                  <!-- Operations -->
                </span>
                <a class="details-link" ng-click="openSubTab('workflow-operations', 'EventWorkflowOperationsResource', subNavData.id, true)" translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.DETAILS">
                  <!-- Details -->
                </a>
              </li>
              <li>
                <span translate="EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.TITLE">
                  <!-- Errors & Warnings -->
                </span>
                <a class="details-link" ng-click="openSubTab('errors-and-warnings', 'EventErrorsResource', subNavData.id, true)" translate="EVENTS.EVENTS.DETAILS.WORKFLOWS.DETAILS">
                  <!-- Details -->
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="workflow-operations" data-parent="workflows" data-level="3" data-label="EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-container">
          <header translate="EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TITLE">
            <!-- Workflow Operations -->
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <thead>
                <tr>
                  <th translate="EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.STATUS"><!-- Status --></th>
                  <th translate="EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.TITLE"><!-- Title --> <i></i></th>
                  <th translate="EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.DESCRIPTION"><!-- Description --> <i></i></th>
                  <th class="medium"></th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in subNavData.entries track by $index">
                  <td>{{ item.status | translate }}</td>
                  <td>{{ item.title }}</td>
                  <td>{{ item.description }}</td>
                  <td>
                    <a class="details-link" ng-click="openSubTab('operation-details', 'EventWorkflowOperationDetailsResource', $index)" translate="EVENTS.EVENTS.DETAILS.MEDIA.DETAILS">
                      <!-- Details -->
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="operation-details" data-parent="workflows" data-level="4" data-label="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TITLE">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <div class="full-col">
        <div class="obj tbl-details">
          <header translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TITLE">
            <!-- Operation Details -->
          </header>
          <div class="obj-container">
            <table class="main-tbl">
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.TITLE">
                  <!-- Title -->
                </td>
                <td>{{ subNavData.name}}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.DESCRIPTION">
                  <!-- Description -->
                </td>
                <td>{{ subNavData.description }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.STATE">
                  <!-- State -->
                </td>
                <td>{{ subNavData.state | translate }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.EXECUTION_HOST">
                  <!-- Execution Host -->
                </td>
                <td>{{ subNavData.execution_host }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.JOB">
                  <!-- Job -->
                </td>
                <td>{{ subNavData.job }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.TIME_IN_QUEUE">
                  <!-- Time in Queue -->
                </td>
                <td>{{ subNavData.time_in_queue }}ms</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.STARTED">
                  <!-- Started -->
                </td>
                <td>{{ subNavData.started | localizeDate : 'dateTime' : 'medium'}}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.FINISHED">
                  <!-- Finished -->
                </td>
                <td>{{ subNavData.completed | localizeDate : 'dateTime' : 'medium'}}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.RETRY_STRATEGY">
                  <!-- Retry Strategy -->
                </td>
                <td>{{ subNavData.retry_strategy }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.FAILED_ATTEMPTS">
                  <!-- Failed Attempts -->
                </td>
                <td>{{ subNavData.failed_attempts }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.MAX_ATTEMPTS">
                  <!-- Max -->
                </td>
                <td>{{ subNavData.max_attempts }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.EXCEPTION_HANDLER_WORKFLOW">
                  <!-- Exception Handler Workflow -->
                </td>
                <td>{{ subNavData.exception_handler_workflow }}</td>
              </tr>
              <tr>
                <td translate="EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.FAIL_ON_ERROR">
                  <!-- Fail on Error -->
                </td>
                <td>{{ subNavData.fail_on_error }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="btm-spacer"></div>
</section>
